<template>
	<view>
		<!-- 搜索 -->
		<view class="search flex flexVcen">
			<view class="iconfont inview icon-back" @click="back"></view>
			<u-search v-model="searchKey" shape="square" @custom="getsearch" @search="getsearch" :action-style="{'color': '#fff'}"></u-search>
		</view>
		<!-- 头部 -->
		<view class="tab">
			<u-tabs active-color="#b22726" :list="tabList" :is-scroll="false" :current="current" @change="tabschange"></u-tabs>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view v-show="(current == 0)">
				   <u-empty v-show="(this.foodList.length == 0 && this.searchList.length ==0)" mode="list" text="土特产为空" marginTop="240"></u-empty>
					<FoodList :list="foodList" :tag="false" v-show="!this.isSearch"></FoodList>
					<FoodList :list="searchList"  :tag="false" v-show="this.isSearch"></FoodList>
			</view>
		   <view  v-show="(current == 1)">
			      <u-empty v-show="(this.storeList.length == 0 && this.searchList.length ==0)" mode="list" text="店铺为空" marginTop="240"></u-empty>
				<StoreList :list="storeList"  v-show="!this.isSearch"></StoreList>
				<StoreList :list="searchList"  v-show="this.isSearch"></StoreList>
		    </view>
		</view>
		<!-- 返回顶部 -->
		<view class="backTop" @click="backTop" v-show="(this.scrollTop > 300)">
			<u-icon size="40" name="arrow-upward"></u-icon>
		</view>
		<!-- 提示> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	
	import {getGoodList, getStoreList} from '../../api/store.js'
	import FoodList from '../../components/foodList.vue'
	import StoreList from '../../components/storeList.vue'
	export default {
		data() {
			return {
				tabList: [{name: '土特产' }, {name: '店铺'}],
				searchKey: '',
				current: 0,
				scrollTop: 0,
				params: {
				  name: '',
				  place: '',
				  pageNum: 1,
				  pageSize: 6
				},
				storeList: [],
				foodList: [],
				searchList: [],
				isSearch: false,
				
				
			};
		},
		components: {
			FoodList,
			StoreList,
		},
		watch: {
		  searchKey (data) {
			 if (data === '') {
				 this.isSearch = false
				 if (this.current == 0) {
					 this.getfoodList()
				 } else {
					 this.getstoreList()
				 }
			 } 
		  }
		},
		mounted() {
		  this.getfoodList()
		},
		onReachBottom() {
			if (this.isSearch) {
				this.getMoreSearch()
			} else {
				 this.getMore()
			}
		},
		onPageScroll(e) {
		  this.scrollTop = e.scrollTop
		},
		methods:{
			// 获取餐厅列表
			async getfoodList () {
				this.params.pageNum = 1
				const res = await getGoodList(this.params)
				this.foodList = res.data.data.data
			},
			// 获取美食列表
			async getstoreList () {
				this.params.pageNum = 1
				const res = await getStoreList(this.params)
				this.storeList = res.data.data.data
			},
			// 搜索
			async getsearch () {
				this.params.name = this.searchKey
				this.params.pageNum = 1
				if (this.current == 0)  {
					const res = await getGoodList(this.params)
					this.searchList = res.data.data.data
				} else {
					const res = await getStoreList(this.params)
					this.searchList = res.data.data.data
				}
				this.isSearch = true
			},
			// 获取更多的搜索结果
			async getMoreSearch () {
				let res
				this.params.pageNum++
				if (this.current == 0)  {
				res = await getGoodList(this.params)
				} else {
			    res = await getStoreList(this.params)	
				}
				if (res.data.data.data.length ==0) {
					this.$refs.uToast.show({
					title: '没有更多数据了',
					position: 'top',
					})
				} else {
					this.searchList = [...this.searchList, ...res.data.data.data]
				}
			},
			// 加载更多
			async getMore () {
				this.params.pageNum++
				if (this.current == 0) {
					const res = await getGoodList(this.params)
					if (res.data.data.data.length ==0) {
						this.$refs.uToast.show({
						title: '没有更多数据了',
						position: 'top',
						})
					} else {
						this.foodList = [...this.foodList, ...res.data.data.data]
					}
				} else {
					const res = await getStoreList(this.params)
					if (res.data.data.data.length ==0) {
						this.$refs.uToast.show({
						title: '没有更多数据了',
						position: 'top',
						})
					} else {
						this.storeList = [...this.storeList, ...res.data.data.data]
					}
				}
			},
			// tab选择的确认
			tabschange(e) {
				this.current = e
				this.params.pageNum = 0
				this.searchKey = ''
				this.params.name = ''
				this.params.pageNum = 1
				if (e == 0) {
					this.getfoodList()
				} else {
					this.getstoreList()
				}
				this.backTop()
			},
			// 返回顶部
			backTop () {
				uni.pageScrollTo({
				scrollTop: 0, //距离页面顶部的距离
				duration: 300
				});
			},
			// 返回上一级
			back () {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
/* 搜索 */
.search {
	background-color: $theme-color;
}
/* 列表 */
.list {
	.listItem {
		padding:  18rpx 24rpx;
		&:first-child {
		margin-top: 0;
	}
		background-color: #fff;
		margin-top: 8rpx;
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 12rpx;
		}
		.info {
			margin-left: 18rpx;
			.price {
				margin-top: 18rpx;
				font-weight: bolder;
			}
		}
	}
}
</style>
